<template v-if="bye">
  <div style="padding: 0 14px 0">
    <!-- <RouteTitle /> -->
    <a-row
      justify="space-between"
      align="middle"
      style="margin: 10px 0 30px"
      :gutter="[0, 20]"
    >
      <a-col>
        <a-row align="middle" :gutter="[0, 20]">
          <a-col style="margin-right: 20px">
            <a-button>项目名称</a-button>
            <a-input
              v-model:value="searData.name"
              placeholder="请输入项目名称"
              style="width: 276px; border-left: none"
              allowClear
            />
          </a-col>
          <a-col>
            <a-button>创建时间</a-button>
            <a-range-picker
              v-model:value="searData.dateTime"
              :ranges="ranges"
              valueFormat="YYYY/MM/DD"
            />
          </a-col>
        </a-row>
      </a-col>
      <a-col>
        <a-space>
          <a-button
            type="primary"
            style="background: #2878ff; border: none; border-radius: 6px"
            @click="searchClick"
            ><search-outlined />查询</a-button
          >
          <a-button
            ghost
            type="primary"
            style="border: 1px solid #e0e0e6; color: #000; border-radius: 6px"
            @click="resetting"
            ><redo-outlined />重置</a-button
          >
        </a-space>
      </a-col>
    </a-row>
    <a-button
      @click="addMerchant"
      type="primary"
      style="
        background: #2878ff;
        border: none;
        border-radius: 6px;
        margin-right: 10px;
      "
      ><plus-outlined />创建项目</a-button
    >
    <a-button
      @click="toPOLList"
      type="primary"
      style="background: #2878ff; border: none; border-radius: 6px"
      >POI列表</a-button
    >
    <a-spin :spinning="spinning">
      <a-row
        :gutter="[16, 16]"
        style="margin: 20px 0"
        v-if="libraryList.length"
      >
        <a-col :span="8" v-for="item in libraryList" :key="item.id">
          <a-row class="material-list">
            <a-row class="sub-list">
              <img
                class="image-icon"
                :src="
                  item.logo ||
                  'https://ui.biaodianyun.com/miniprogram/assets/jk-admin/store_icon.FkbehfThn1Rf4Yx1P6DdxJmF2vH5.png'
                "
              />
              <a-col class="sub-content" flex="1">
                <div class="name">{{ item.name }}</div>
                <div class="shop" @click="lookTickto(item)">
                  <div>抖音门店</div>
                  <div class="num">{{ item.associ_pois_count }}</div>
                </div>
              </a-col>
            </a-row>
            <a-divider style="margin: 0" />
            <a-row
              justify="space-between"
              align="middle"
              style="width: 100%; padding: 0 20px; color: #9999"
            >
              <a-col> 创建时间: {{ item.created_at }} </a-col>
              <a-col>
                <a-popover placement="bottom">
                  <template #content>
                    <div>
                      <a-button type="text" @click="editClick(item)"
                        >编辑</a-button
                      >
                    </div>
                    <a-button type="text" @click="deleteClick(item)"
                      >删除</a-button
                    >
                  </template>
                  <a-button type="text"
                    ><ellipsis-outlined style="font-size: 26px"
                  /></a-button>
                </a-popover>
              </a-col>
            </a-row>
          </a-row>
        </a-col>
      </a-row>
      <a-empty v-else :image="simpleImage" style="margin-top: 50px" />
    </a-spin>
    <a-row align="middle" justify="end">
      <a-col>
        <a-pagination
          v-model:current="page"
          show-quick-jumper
          :pageSize="12"
          :total="total"
          @change="onPaginationChange"
        />
      </a-col>
    </a-row>
    <!-- 新建项目 -->
    <NewMerchant ref="merchantRef" @onSubmit="onSubmit" @oncancel="oncancel" />
    <!-- 抖音门店 -->
    <TiktokStore
      :visible="visibleTiktokStore"
      :id="tiktokId"
      @onCancel="visibleTiktokStore = false"
    />
  </div>
    <!-- 充值弹窗 -->
    <vipModal :visible="vipVisible" @close="vipVisible = false"></vipModal>

</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  createVNode,
  ref,
  nextTick,
  h,
} from "vue";
import {
  RedoOutlined,
  SearchOutlined,
  PlusOutlined,
  EllipsisOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { useRoute, useRouter } from "vue-router";
import dayjs from "dayjs";
import NewMerchant from "./modules/NewMerchant.vue";
import { Modal, Empty, message, notification } from "ant-design-vue";
import TiktokStore from "./modules/TiktokStore.vue";
import request from "../../../common/utils/request";
import router from "../../../router";
import store from "@/store/index.js";
import { onBeforeRouteLeave } from "vue-router";
// 充值弹窗
import vipModal from '@/socialMedia/Vip/vipModal.vue'
export default defineComponent({
  name: "ShopList",
  components: {
    vipModal,
    RedoOutlined,
    SearchOutlined,
    PlusOutlined,
    NewMerchant,
    EllipsisOutlined,
    TiktokStore,
  },
  setup() {
    const state = reactive({
      vipVisible:false,
      bye: true,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      ranges: {
        过去7天: [dayjs().startOf("day").subtract(6, "day"), dayjs()],
        过去30天: [dayjs().startOf("day").subtract(30, "day"), dayjs()],
        过去90天: [dayjs().startOf("day").subtract(90, "day"), dayjs()],
      },

      visibleMerchant: false,

      merchantList: [
        {
          title: "草莓有点甜",
        },
      ],

      page: 1,
      total: 0,
      visibleTiktokStore: false,
      spinning: false,
      libraryList: [],
      searData: {
        name: null,
        dateTime: null,
      },
      id: 0,

      tiktokId: 0,
    });

    const resetting = () => {
      for (let key in state.searData) {
        state.searData[key] = null;
      }
      state.page = 1;
      getlibraryList();
    };
    // 搜索
    const searchClick = () => {
      state.page = 1;
      getlibraryList();
    };
    const merchantRef = ref(null); //新增组件实例
    // 新增
    const addMerchant = () => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        state.vipVisible = true
      } else {
        merchantRef.value.showModal(); //打开新增弹窗
      }
    };
    // 修改
    const editClick = (item) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
       state.vipVisible = true
      } else {
        state.id = item.id;
        merchantRef.value.showModal(item.id); //打开新增弹窗
      }
    };
    // 弹窗取消
    const onCancelMerchant = () => {
      state.visibleMerchant = false;
    };
    // 提交
    const onSubmit = () => {
      getlibraryList();
    };
    // 分页改变
    const onPaginationChange = (page, pageSize) => {
      state.page = page;
      state.pageSize = pageSize;
      getlibraryList();
    };

    const getlibraryList = () => {
      let params = {
        page: state.page,
        pageSize: 12,
        ...state.searData,
      };
      if (state.searData.dateTime) {
        params.start_date = state.searData.dateTime[0];
        params.end_date = state.searData.dateTime[1];
        params.dateTime = undefined;
      }
      state.spinning = true;
      request
        .get("/work_ai", "/user/shotstack/library/list", params)
        .then((res) => {
          state.libraryList = res.result.data;
          state.total = res.result.total;
          state.spinning = false;
        })
        .catch(() => {
          state.spinning = false;
        });
    };
    getlibraryList();

    const deleteClick = (item) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        state.vipVisible = true
      } else {
        Modal.confirm({
          title: "删除项目",
          icon: "",
          content: h("div", {}, [
            h("span", "删除项目时"),
            h(
              "span",
              {
                style: "color:red;",
              },
              "将同时删除素材库的项目目录及素材，"
            ),
            h("span", "你确定删除项目吗？"),
          ]),
          cancelText: "取消",
          okText: "确定",
          onOk() {
            request
              .del("/work_ai", "/user/shotstack/library", {
                merchant_library_id: item.id,
              })
              .then((res) => {
                message.success("删除成功");
                getlibraryList();
                // 删除项目后, 清空素材文件夹的id的回显id
                store.commit("videoMixCut/SET_FOLDER_IDS", {
                  merchant_library_id: null,
                  merchant_folder_statck_id: null,
                  group_id: null,
                });
              });
          },
          class: "test",
        });
      }
    };

    // 查看抖音门店
    const lookTickto = (data) => {
      state.tiktokId = data.id;
      state.visibleTiktokStore = true;
    };
    // POL列表
    const toPOLList = () => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        state.vipVisible = true
      } else {
        router.push({
          name: "PoiList",
          query: {
            titleKey: "shopList",
          },
        });
      }
    };

    onBeforeRouteLeave((to, from, next) => {
      state.bye = false;
      next(true);
    });
    return {
      ...toRefs(state),
      merchantRef,
      resetting,
      searchClick,
      addMerchant,
      onCancelMerchant,
      onPaginationChange,
      editClick,
      deleteClick,
      lookTickto,
      onSubmit,
      toPOLList,
    };
  },
});
</script>

<style lang="less" scoped>
.material-list {
  width: 100%;
  height: 196px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;

  .sub-list {
    width: 100%;
    height: 156px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0 20px;

    .image-icon {
      width: 100px;
      height: 100px;
      border-radius: 100px;
      margin-right: 20px;
      object-fit: contain;
    }

    .sub-content {
      // width: 200px;
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /* 文本最多显示两行 */
        overflow: hidden;
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
      }

      .shop {
        width: 79px;
        height: 54px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #f3f1ff;
        border-radius: 5px;
        cursor: pointer;

        .num {
          color: #6e2cdb;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
